<template>
	<view id="app" class="app-height buyersVideo connaught-style" style="background-color: #F7F7F7;">
	    <input  type="file" ref="uploadFile" id="uploadFile" class="uploadFile" @change="getBigectURL($event)"/>
	    <view class="tabs" style="display: flex; justify-content:space-around">
	        <view class=" item" :class="[index==1?'active':'']"  @click="tabsClick(1)" >审核中<view class="span"></view></view>
	        <view class=" item" :class="[index==2?'active':'']"  @click="tabsClick(2)" >已发布<view class="span"></view></view>
			<view class=" item" :class="[index==3?'active':'']"  @click="tabsClick(3)" >被驳回<view class="span"></view></view>
			<view class=" item" :class="[index==0?'active':'']"  @click="tabsClick(0)" >草稿<view class="span"></view></view>
			<view class=" item" :class="[index==4?'active':'']"  @click="tabsClick(4)" >已下架<view class="span"></view></view>
	    </view>
		<!-- 审核中 -->
	    <view class="live-broadcast" v-if="index==1">
	        <view class="item" v-for="item in videoList" @click="toVideoMain(item.id)">
	            <view style="" class="newsImg">
	                <image class="main" :src="item.coverImg?item.coverImg:(item.videoUrl+'?x-oss-process=video/snapshot,t_7000,f_jpg,m_fast')"/>
	            </view>
	            <view class="date">
				<image  class="tu" :src="imgUrl + '/statics/js/modules/applet/img/video.png'" mode=""></image>
				</view>
	            <view class="good-info">
	                <view class="title">标题:{{item.videoTitle}}</view>
	                <view class="info-comment" v-if="item.status == 3">
	                    <view style="color: red">{{item.auditNoPassReason}}</view>
	                </view>
	                <view class="info-comment" v-else>
	                    <view><image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon105.png"/>{{item.browseCount}}</view>
	                    <view class="tu2"><image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon104.png"/>{{item.commentCount}}</view>
	                </view>
					  <view style="color: red">{{item.status==1?'审核中': item.status==3?'审核不通过':''}}</view>
	                <view class="btn" style="justify-content: space-between;display: flex; ">
	                  
	                    <view style="display: flex; margin-left: 260rpx;margin-top: 10rpx;">
	                    
	                        <view class="delNews" @tap.stop="delVideo(item.id)">删除</view>
	                    </view>
	                </view>
					<view class="createAt">{{item.createAt}}</view>
	            </view>
	        </view>
	    </view>
		<!-- 已发布 -->
		<view class="live-broadcast" v-if="index==2">
		    <view class="item" v-for="item in videoList" @click="toVideoMain(item.id)">
				<view style="" class="newsImg">
				    <image class="main" :src="item.coverImg?item.coverImg:(item.videoUrl+'?x-oss-process=video/snapshot,t_7000,f_jpg,m_fast')"/>
				</view>
				<view class="date">
				<image  class="tu" :src="imgUrl + '/statics/js/modules/applet/img/video.png'" mode=""></image>
				</view>
				<view class="good-info">
				    <view class="title">标题:{{item.videoTitle}}</view>
				    <view class="info-comment" v-if="item.status == 3">
				        <view style="color: red">{{item.auditNoPassReason}}</view>
				    </view>
				    <view class="info-comment" v-else>
				        <view><image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon105.png"/>{{item.browseCount}}</view>
				        <view class="tu2"><image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon104.png"/>{{item.commentCount}}</view>
				    </view>
					<view class="bq-list">
						<view class="biaoqian" v-for="ss in item.tagList">
							{{'#'+ss.tagName}}
						</view>
					</view>
					  <view style="color: red">{{item.status==1?'审核中': item.status==3?'审核不通过':''}}</view>
				    <view class="btn" style="justify-content: space-between;display: flex;">
				        <view style="display: flex; margin-left: 144rpx;margin-top: 16rpx;">
				            <view class="downNews" @tap.stop="upAndDown(item.id, 4)" v-show="item.status!= 3">下架</view>
				            <view class="delNews" @tap.stop="delVideo(item.id)">删除</view>
				        </view>
				    </view>
					<view class="createAt">{{item.createAt}}</view>
				</view>
			</view>
		</view>
		<!-- 被驳回 -->
		<view class="live-broadcast" v-if="index==3">
		    <view class="item" v-for="item in videoList" @click="toVideoMain(item.id)">
				<view style="" class="newsImg">
				    <image class="main" :src="item.coverImg?item.coverImg:(item.videoUrl+'?x-oss-process=video/snapshot,t_7000,f_jpg,m_fast')"/>
				</view>
				<view class="date">
					<image  class="tu" :src="imgUrl + '/statics/js/modules/applet/img/video.png'" mode=""></image>
				</view>
				<view class="good-info">
				    <view class="title">标题:{{item.videoTitle}}</view>
				    <view class="info-comment" >
				        <view><image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon105.png"/>{{item.browseCount}}</view>
				        <view class="tu2"><image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon104.png"/>{{item.commentCount}}</view>
				    </view>
					<view class="info-comment" v-if="item.status == 3">
					    <view style="color: red">驳回原因:{{item.auditNoPassReason}}</view>
					</view>
				    <view class="btn" style="justify-content: space-between;display: flex; ">
				        <view style="display: flex; margin-left: 144rpx;margin-top: 12rpx;">
				            <view class="downNews" @tap.stop="updateVideo(item.id)">编辑</view>
				            <view class="delNews" @tap.stop="delVideo(item.id)">删除</view>
				        </view>
				    </view>
					<view class="createAt">{{item.createAt}}</view>
				</view>
			</view>
		</view>
		<!-- 已下架 -->
		<view class="live-broadcast" v-if="index==4">
		    <view class="item" v-for="item in videoList" @click="toVideoMain(item.id)">
				<view style="" class="newsImg">
				    <image class="main" :src="item.coverImg?item.coverImg:(item.videoUrl+'?x-oss-process=video/snapshot,t_7000,f_jpg,m_fast')"/>
				</view>
				<view class="date">
					<image  class="tu" :src="imgUrl + '/statics/js/modules/applet/img/video.png'" mode=""></image>
				</view>
				<view class="good-info">
				    <view class="title">标题:{{item.videoTitle}}</view>
				    <view class="info-comment" v-if="item.status == 3">
				        <view style="color: red">{{item.auditNoPassReason}}</view>
				    </view>
				    <view class="info-comment">
				        <view><image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon105.png"/>{{item.browseCount}}</view>
				        <view class="tu2"><image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon104.png"/>{{item.commentCount}}</view>
				    </view>
					<view class="bq-list">
						<view class="biaoqian" v-for="ss in item.tagList">
							{{'#'+ss.tagName}}
						</view>
					</view>
				    <view class="btn" style="justify-content: space-between;display: flex; ">
				        <view style="display: flex; margin-left: 144rpx;margin-top: 16rpx;">
				            <view class="downNews" @tap.stop="updateVideo(item.id)">编辑</view>
				            <view class="delNews" @tap.stop="delVideo(item.id)">删除</view>
				        </view>
				    </view>
					<view class="createAt">{{item.createAt}}</view>
				</view>
			</view>
		</view>
		<!-- 草稿 -->
	    <view class="live-broadcast" v-if="index==0">
	        <view class="item" v-for="item in videoList" @click="toVideoMain(item.id)">
	            <view class="newsImg">
	                <image class="main" :src="item.coverImg?item.coverImg:(item.videoUrl+'?x-oss-process=video/snapshot,t_7000,f_jpg,m_fast')"/>
	            </view>
	            <view class="date">
					<image  class="tu" :src="imgUrl + '/statics/js/modules/applet/img/video.png'" mode=""></image>
				</view>
	            <view class="good-info">
	                <view class="title">标题:{{item.videoTitle}}</view>
	                <view class="info-comment">
	                    <view><image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon105.png"/>{{item.browseCount}}</view>
	                    <view class="tu2"><image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon104.png"/>{{item.commentCount}}</view>
	                </view>
					<view class="bq-list">
						<view class="biaoqian" v-for="ss in item.tagList">
							{{'#'+ss.tagName}}
						</view>
					</view>
	                <view class="btn" >
	                    <view style="display: flex;margin-left: 144rpx;margin-top: 16rpx;">
	                        <view class="delNews" @tap.stop="delVideo(item.id)">删除</view>
							<view class="downNews" @tap.stop="updateVideo(item.id)">编辑</view>
	                    </view>
	                </view>
					<view class="createAt">{{item.createAt}}</view>
	            </view>
	        </view>
	    </view>
		<!-- 判断是否为空状态 -->
		<view class="" v-if="videoList.length==0">
			<image  class="tu" :src="imgUrl + '/statics/js/modules/h5/img/noData.png'" mode=""></image>
			<view class="tu1">您还没有发布视频呢~</view>
			<view class="tu3" @click="fabu">前往发布视频</view>
		</view>
	</view>
</template>

<script>
import videoApi from '@/api/videoBuyers.js';
import commonApi from '@/utils/commonMethod.js';
import indexApi from '@/utils/request/index.js'
export default {
	data() {
		return {
			register: false,//登录
			release:false,
			shade:false,
			index: 1, //tabs切换
			loadingVideo: false,//正在加载
			noMoreVideo: false,//没有更多数据
			noDataVideo: false,//没有数据
			videoList: [],
			searchVideo: {
				page: 1,
				limit: 10,
				search: '',
				lastpage: 0,
				totalPage: '',
			},
			currentUser:{},
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
			imgUrl: indexApi.baseUrl,
		}
	},
	async onLoad(options) {
		
		//判断该页面是否是通过回退页面进入的,如果不是则清理缓存
			
		
		const index = options.index
		if(index){
			this.index = parseInt(index)
		}
		
		// this.register =await getUserLoginFlag()
		//查询视频
		this.queryVideo();

		
	},
	onShow(){
			
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
			setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	async mounted() {
		//获取当前用户
		const currentPromise = await commonApi.currentUserAxios()
		this.currentUser = currentPromise.data.session_user_h5
		
		const pages = getCurrentPages()
		const currentPage =pages[pages.length - 1]
		this.currentUrl = currentPage.$page.fullPath
	},
	methods: {
		saveFootPrint(stayTime){
		    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"我的视频列表")
					
		},
		changeIsUpload(){
			this.shade=true
			this.release=true
			this.issue =false
			
		},
		//关闭发布
		changeShade(){
			this.release=false
			this.shade=false
			this.issue =true
		
		},
		queryVideo() {
			if (this.searchVideo.page != this.searchVideo.lastpage) {
				this.searchVideo.lastpage = this.searchVideo.page;
				let search = this.searchVideo.search;
				console.log(this.index);
				videoApi.queryVideo(search,this.index,this.searchVideo.page,this.searchVideo.limit).then(res => {
					if (res.data.code === 0) {
						this.loadingVideo = false
						this.searchVideo.totalPage = res.data.page.totalPage;
						this.searchVideo.page = res.data.page.currPage
						if (this.searchVideo.page == this.searchVideo.totalPage) {
							this.noMoreVideo = true
						}
						this.videoList = [...this.videoList, ...res.data.page.list];
						this.videoList.forEach((value, index, array) => {
							if (value.videoDuration) {
								value.videoDuration = value.videoDuration.slice(-8)
							}
						})
					}
				})
			}
		},

		toVideoMain(id) {
			//跳转之前缓存index
			uni.redirectTo({
				url:"/pages/product/vidoDetail/uploadVideo?id=" + id
			})
		},

		tabsClick(e) {
			this.videoList = [];
			this.index = e;
			this.searchVideo.page = 1;
			this.searchVideo.lastpage = 0;
			this.queryVideo();
		},

		//上/下架
		upAndDown(id, status) {
			if (id == null) {
				return;
			}
			var lock = false;
			
			uni.showModal({
				title: "提示",
				content: "确定要下架吗？",
				showCancel:true,
				success: function (res) {
					var that = this
					if (res.confirm) {
						console.log('用户点击确定');
						if (!lock) {
							lock = true;
							videoApi.upAndDown(id,status).then((res) => {
								that.videoList = [];
								that.searchVideo.page = 1;
								that.searchVideo.lastpage = 0;
								that.queryVideo();
							});
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}.bind(this)
			});
			
		},

		//删除
		delVideo(id){
			if(id == null){
				return ;
			}
			var lock = false;
			
			uni.showModal({
				title: "提示",
				content: "确定要删除记录？？",
				showCancel:true,
				success: function (res) {
					var that = this
					if (res.confirm) {
						console.log('用户点击确定');
						if (!lock) {
							lock = true;
							videoApi.delVideo(id).then((res) => {
								that.videoList = [];
								that.searchVideo.page = 1;
								that.searchVideo.lastpage = 0;
								that.queryVideo();
							});
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}.bind(this)
			});
			
		},


		/**
		 * 上传视频
		 */
		uploadVideo() {
			uni.redirectTo({
				url:"/pages/product/vidoDetail/uploadVideo?t=f"
			})
		},
       //前往发布视频
	   fabu(){
		   uni.navigateTo({
		   	url:"/pages/product/vidoDetail/uploadVideo"
		   })
		   
	   },
		updateVideo(id){
			uni.redirectTo({
				url:"/pages/product/vidoDetail/uploadVideo?id=" + id
			})
		},
		
		
	},
}
	
</script>

<style>
	.tu{
		width:324rpx;
		height:256rpx;
		margin: 100rpx auto;
		position: fixed;
		top: 10%;
		left: 27%;
	}
	.tu1{
		width:324rpx;
		height:256rpx;
		margin: 100rpx auto;
		position: fixed;
		top: 34%;
		left: 32%;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-weight: normal;
		color: #A1A0A0;
	}
	.tu3{
		width: 320rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		color: white;
		font-size: 28rpx;
		background: linear-gradient(180deg, #54D6D2 0%, #00AAA6 100%);
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		opacity: 1;
		position: fixed;
		top: 48%;
		left: 28%;
	}
	.buyersVideo .tabs {
	    padding: 0px 20rpx;
	    border-bottom: 1px solid #EBEBEB;
	    box-shadow: none;
		display: flex;
		
	}
	
	.connaught-style .tabs {
	    height: 100rpx;
		line-height: 100rpx;
	    justify-content: flex-start;
	    background-color: #ffffff;
	    position: fixed;
	    top: 0px;
	    left: 0px;
	    width: 94%;
	    z-index: 35;
	}
	.buyersVideo .tabs .item {
	    padding: 0px 20rpx;
	   /* letter-spacing: 3rpx; */
	}
	.connaught-style .tabs .item {
	    font-size: 15px;
	    text-align: center;
	    position: relative;
	}
	.tabs .item .span {
	    position: absolute;
	    height: 4rpx;
	    border-radius: 2rpx;
	}
	.tabs .item .span {
	    width: 50%;
	    left: 25%;
	    /* bottom: -26rpx; */
	}
	.connaught-style .tabs .item.active {
	    color: #019d9d;
	}
	.connaught-style .tabs .item.active .span {
	    background-color: #019d9d;
	}
	.buyersVideo .live-broadcast {
	    padding: 60rpx 20rpx 0;
	}
	.buyersVideo .live-broadcast .item {
	    flex-wrap: nowrap;
	    padding: 20rpx;
	    align-items: flex-start;
	    justify-content: flex-start;
	    background-color: #ffffff;
	    box-shadow: 0px 0.06rem 0.26rem 0px rgba(132, 145, 167, 0.12);
	 /*   border-radius: 5rpx; */
	  /*  margin-bottom: 40rpx; */
	    position: relative;
		display: flex;
		height: 234rpx;
		margin-top: 20rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
	.buyersVideo .live-broadcast .item image {
	    width: 300rpx;
	    border-radius: 10rpx;
	    flex-shrink: 0;
	    overflow: hidden;
	    display: flex;
	    align-items: center;
	}
	.newsImg{
		width: 192rpx;
		height: 144rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		overflow: hidden;
		background-color: rgb(0, 0, 0);
	}
	.buyersVideo .live-broadcast .item .good-info {
	    margin-left: 20rpx;
	    width: 70%;
	    flex-shrink: 1;
		margin-top: 20rpx;
	}
	.buyersVideo .live-broadcast .item .good-info .title {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
	    height: 46rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		color: #2E2D2D;
	}
	.buyersVideo .live-broadcast .item .good-info .info-comment {
	    justify-content: flex-start;
	    padding: 8rpx 0px;
		display: flex;
	}
	.tu2{
		margin-left: 30rpx;
	}
	.buyersVideo .live-broadcast .item .good-info .btn .downNews {
		width: 112rpx;
		font-size: 26rpx;
		height: 56rpx;
		line-height: 56rpx;
		/* background: #029e9d; */
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 1px solid #00AAA6;
		color: #00AAA6;
		margin-left: 30rpx;
		text-align: center;
		vertical-align: middle;
		background-color: white;
		border-color: #00AAA6;
	}
	.buyersVideo .live-broadcast .item .good-info .btn .delNews {
		width: 112rpx;
		font-size: 26rpx;
		height: 56rpx;
		line-height: 56rpx;
		/* background: #029e9d; */
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		border: 1px solid #00AAA6 ;
		color: #00AAA6;
		margin-left: 30rpx;
		text-align: center;
		vertical-align: middle;
		background-color: white;
		border-color: #00AAA6;
	}
	
	.buyersVideo .live-broadcast .item .good-info .info-comment view image {
		 width: 30rpx;
		 height: 30rpx;
		 display: inline-block;
		 vertical-align: middle;
		 margin-right: 10rpx;
		 margin-top: -10rpx;
	}
	.buyersVideo .live-broadcast .item .date {
		position: absolute;
		width: 80rpx;
		line-height: 30rpx;
		background-color: #fb515f;
		font-size: 10px;
		z-index: 33;
		left: 20rpx;
		top: -12rpx;
		text-align: center;
		color: #ffffff;
		background: rgba(0, 0, 0, 0.4);
	}
	.buyersVideo .live-broadcast .item .tu{
		position: absolute;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #fb515f;
		font-size: 10px;
		z-index: 33;
		left: 85%;
	    top:50%;
		text-align: center;
		color: #ffffff;
		background: rgba(0, 0, 0, 0.4);
	}
	.createAt{
		position: absolute;
		bottom: 30rpx;
		left: 20rpx;
		color: #A1A0A0;
	}
	.bq-list{
		display: flex;
		flex-wrap: wrap;
		height: 45rpx;
		overflow: hidden;
	}
	.biaoqian{
	/* 	padding: 0 17rpx; */
		margin: 0 16rpx 16rpx 0;
		height: 48rpx;
		background-color: #f2f3f5;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #5C5C5C;
		line-height: 48rpx;
		text-align: center;
	}
</style>